<template>
  <div class="callServiceDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">呼叫服务详情</x-header>
    <div class="topHolder"></div>
    <checklist title="服务类型：" :max="1" required :options="typeList" v-model="choosenList" @on-change="changeType"></checklist>
    <group title="可点击填入备注框：" v-if="choosenList.length > 0">
      <div class="descList">
        <div class="item" v-for="(item,index) in descList" :key="index" @click="fillTextarea(item)"><span v-text="item"></span></div>
      </div>
    </group>
    <group title="备注(选填)：">
      <x-textarea :max="200" v-model="remark" placeholder="点击输入"></x-textarea>
    </group>
    <box gap="1rem 0.8rem">
      <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="提交"></x-button>
    </box>
  </div>
</template>

<script>
  import { Group, Checklist, XTextarea, Box, XButton } from 'vux'
  import {getLowerType,submitCallService} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'callServiceDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramTableId:this.$route.params.tableId,
        remark:'',
        typeList:[],
        choosenList:[],
        descList:[],
        callTypeList:[]
      }
    },
    components:{
      Group,
      Checklist,
      XTextarea,
      Box,
      XButton
    },
    computed:{

    },
    methods:{
      submit(){
        if(this.choosenList.length <= 0){
          message({message:'请先选择呼叫服务类型！',type:'error'})
        }else{
          let reqParams = {
            remark:this.remark,
            type:this.choosenList[0],
            tableId:this.paramTableId
          }
          submitCallService(reqParams).then((res)=>{
            if(res.status == 'success'){
              message({message:'呼叫服务成功',type:'info'})
              this.$router.push({name:'扫码操作',params:{tableId:this.paramTableId}})
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('submitCallService error info:', res.msg)
            }
            this.loadingStatus = false
          }).catch((err)=>{console.log('submitCallService catch info:',err)})
        }
      },
      changeType(){
        this.callTypeList.some(item =>{
          if(item.key == this.choosenList[0]){
            this.descList = item.list
            return true
          }
        })
        /*for(let item of this.callTypeList){
          if(item.key == this.choosenList[0])this.descList = item.list
        }*/
      },
      fillTextarea(text){
        this.remark += text + '；'
      }
    },
    mounted(){
      getLowerType(2).then((res)=>{
        if(res.status == 'success'){
          this.callTypeList = res.data
          for(let item of this.callTypeList){
            this.typeList.push({key:item.key,value:item.value})
          }
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getLowerType error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getLowerType catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .callServiceDetail{
    .descList{
      margin: 1rem 1rem 0.5rem;
      .item{
        display: inline-block;margin: 0 1rem 0.5rem 0;padding: 0.5rem 1rem;background: #eee;font-size: 0.9rem;border-radius: 1rem;
      }
    }
  }
</style>
